<template>
	<div>
		<div class="tou1">
			<el-steps :active="1" finish-status="success" simple style="margin-top: 20px">
			  <el-step title="1 项目信息" ></el-step>
			  <el-step title="2 回报设置" ></el-step>
			  <el-step title="3 确认信息" ></el-step>
			  <el-step title="4 完成" ></el-step>
			</el-steps>

		</div>
		<!-- 项目信息 -->
		<h1 style="font-weight:normal;color: #D1C2D8;">|-- 项目信息</h1>
		
		<!-- 大分类信息多选框 -->
		<div style="position: absolute;width: 60%;">
			<span style="left: 50px; position: absolute; font-size: 14px;">大分类</span>
			<el-checkbox-group style="position: absolute;left: 110px;" max="1" v-model="selectBigList" :model="bigList" status-icon ref="bigList" @change="showAllMinTypeByBigId()">
				<el-checkbox v-for="item in bigList" :key="item.index" :label="item.bigId" >{{item.bigName}}</el-checkbox>
			</el-checkbox-group>
		</div><br /><br />
		<!-- 小分类信息多选框 -->
		<div style="position: absolute;width: 60%;">
			<span style="left: 50px; position: absolute; font-size: 14px;">小分类</span>
			<el-checkbox-group style="position: absolute;left: 110px;" max="1" v-model="minids" :model="minList" status-icon ref="minList">
				<el-checkbox v-for="item in minList" :key="item.index" :label="item.minId" >{{item.minName}}</el-checkbox>
			</el-checkbox-group>
		</div><br /><br />
		
		<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
			
		  <el-form-item label="项目名称" prop="xmmc">
		    <el-input v-model="ruleForm.xmmc"></el-input>
		  </el-form-item>
			
		  <el-form-item label="开始时间" required>
		      <el-form-item prop="date1">
		        <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
		      </el-form-item>
		  </el-form-item>
		  
		  <el-form-item label="结束时间" required>
		      <el-form-item prop="date2">
		        <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date2" style="width: 100%;"></el-date-picker>
		      </el-form-item>
		  </el-form-item>
		 
		  <el-form-item label="项目简介" prop="desc">
		    <el-input type="textarea" v-model="ruleForm.desc"></el-input>
		  </el-form-item>
		  
		  <el-form-item label="筹资金额(元)" prop="money">
		    <el-input placeholder="筹资金额不能低于100元,不能高于1000000000元" v-model="ruleForm.money"></el-input>
		  </el-form-item>
		  
		  
		  <el-form-item label="项目头图">
			  <!-- 上传项目头图 -->
			  <el-upload
			    action="http://localhost:8080/upLoadImg"
			    list-type="picture-card"
				:on-success="handleAvatarSuccess"
			    :on-preview="handlePictureCardPreview">
			    <i class="el-icon-plus"></i>
			  </el-upload>
			  <el-dialog :visible.sync="dialogVisible">
			    <img width="100%" :src="dialogImageUrl" alt="">
			  </el-dialog>
		  </el-form-item>
		  
		  <el-form-item label="项目详情图">
		    <el-upload
		      action="http://localhost:8080/upLoadImgs"
		      list-type="picture-card"
		      :on-success="handleAvatarSuccess1"
			  :on-remove="removeImgName"
		      :on-preview="handlePictureCardPreview">
		      <i class="el-icon-plus"></i>
		    </el-upload>
		    <el-dialog :visible.sync="dialogVisible">
		      <img width="100%" :src="dialogImageUrls" alt="">
		    </el-dialog>
		  </el-form-item>
		  
		 <h1 style="font-weight:normal;color: #D1C2D8;">|--  发起人信息</h1>
		   <el-form-item label="自我介绍" prop="name">
		     <el-input placeholder="一句话自我介绍,不超过30字" v-model="ruleForm.name" ></el-input>
		   </el-form-item>
		   <el-form-item  label="详细介绍" prop="region">
		     <el-input  placeholder="向支持者详细介绍你自己或你的团队及项目背景,让支持者在最短时间内了解你,不超过100字" type="textarea" v-model="ruleForm.region"></el-input>
		   </el-form-item>
		   <el-form-item label="联系电话" prop="phone">
		     <el-input  placeholder="此信息不会显示在项目页面" v-model="ruleForm.phone"></el-input>
		   </el-form-item>
		   <el-form-item>
		       <el-button type="primary" @click="beforSubmit()">创建项目并进入下一步</el-button>
		     </el-form-item>
		</el-form>
		
	</div>
</template>

<script>
	export default {
	  data() {
		  
		  var vxmmc = (rule, value, callback) => {
		    if (value === '') {
		      this.$message({
		                showClose: true,
		                message: '项目名不能为空！',
		                type: 'error'
		              });
		    } else {
		  	this.queryProjectByProjectName()
		      callback();
		    }
		  };
		  var vregion = (rule, value, callback) => {
		    if (value === '') {
		      this.$message({
		                showClose: true,
		                message: '项目详情介绍不能为空！',
		                type: 'error'
		              });
		    } else {
		      callback();
		    }
		  };
	    return {
			bigList: [],
			selectBigList: [],
			minList: [],
			minids: [],
			minId: '',
			dialogImageUrl: '',
			dialogImageUrls: [],
			dialogVisible: false,
			images: '',
			ruleForm: {
				// 项目名称
				xmmc: '',
				// 开始时间
				date1: '',
				// 项目简介
				desc: '',
				// 筹资金额
				money:'',	
				// 结束时间
				date2:'',
				// 发起人自我介绍
				name: '',
				// 发起人详细介绍
				 region: '',
				// 发起人联系电话
				phone:''
			},
			rules: {  
				dafenlei:[
					{ required: true}
				],
				xmmc: [
				    { min: 5, max: 15, message: '长度在 5 到 15 个字符', trigger: 'blur' },
					{ validator: vxmmc, trigger: 'blur' }
				],
				date1: [
				    { type: 'date', required: true, message: '请选择开始日期', trigger: 'change' }
				],
				date2: [
					{ type: 'date', required: true, message: '请选择结束日期', trigger: 'change' }
				],				         				         
				desc: [
				    { required: true, message: '请填写项目简介', trigger: 'blur' }
				],
				money: [
					{ required: true, message: '请输入筹资金额', trigger: 'blur' }
				],
				name: [
					{ required: true, message: '请输入自我介绍', trigger: 'blur' }		  
				],
				region: [
					{ validator: vregion, trigger: 'blur' }
				],
				phone: [
					{ required: true, message: '请输入联系电话', trigger: 'blur' },
					{ min: 11, max:11, message: '必须是11位手机电话号码', trigger: 'blur' }
				]
			}
	    };
		
	  },
	  mounted() {
	  	this.showAllBigType()
	  },
	  methods: {
		  huibao(val){
			  window.sessionStorage.setItem('projectId',val)
			  this.$router.push('/huibao')
		  },
		  async beforSubmit(){
			  for(var i =0;i<this.dialogImageUrls.length;i++){
				  this.images = this.images + this.dialogImageUrls[i] + ";"
			  }
			  this.minId = this.minids
			  if(this.ruleForm.xmmc!=''){
				  this.onSubmit()
			  }else{
				  this.$message.error("信息不完整或者有误！请检查！")
			  }
			  this.images = ''
		  },
		  async onSubmit() {
			    var userId = window.sessionStorage.getItem("userId")
				var projectId = null
				var param = new URLSearchParams();
				param.append("minId",this.minId)
				param.append("userId",parseInt(userId))
				param.append("projectName",this.ruleForm.xmmc)
				param.append("projectMessage",this.ruleForm.desc)
				param.append("projectAllMoney",this.ruleForm.money)
				param.append("projectAddTime",this.ruleForm.date1)
				param.append("projectEndTime",this.ruleForm.date2)
				param.append("projectTouImg",this.dialogImageUrl)
				param.append("projectImgs",this.images)
				var res =await this.$http.post("insertProject",param);
				console.log(res.data)
				if(res.data.code==200){
					projectId = res.data.data
					this.$message.success(res.data.message)
					/* 添加项目发起人\组织信息 */
					this.insertSponsor(projectId)
				} else {
					this.$message.error(res.data.message)
				}
				
		  },
		  async insertSponsor(val){
			  var projectId = val
			  var param = new URLSearchParams();
			  param.append("projectId",projectId)
			  param.append("introduce",this.ruleForm.name)
			  param.append("text",this.ruleForm.region)
			  param.append("phone",this.ruleForm.phone)
			  var res =await this.$http.post("insertSponsor",param);
			  console.log(res.data)
			  if(res.data.code==200){
			  	this.huibao(projectId)
			  } else {
			  	this.$message.error("发起人信息添加失败！")
			  }
		  },
		  async showAllBigType(){
			  var param = new URLSearchParams();
			  var res =await this.$http.post("selectAllBigType",param);
			  console.log(res.data.code)
			  if(res.data.code==200){
			  	console.log(res.data.data)
			  	this.bigList = res.data.data
			  } else {
				this.$message.error(res.data.message)
			  }
		  },
		  /* 根据大分类id查询大分类下的所有小分类*/
		  async showAllMinTypeByBigId(){
			  var param = new URLSearchParams();
			  param.append("bigId",this.selectBigList)
			  var res =await this.$http.post("selectMinTypeByBigId",param);
			  console.log(res.data.code)
			  if(res.data.code==200){
			  	console.log(res.data.data)
			  	this.minList = res.data.data
			  } else {
			  	this.$message.error(res.data.message)
			  }
		  },
		  /*对项目名进行唯一验证*/
		  async queryProjectByProjectName(){
		  	var param = new URLSearchParams();
		  	param.append("projectName",this.ruleForm.xmmc)
		  	var res =await this.$http.post("selectProjectByProName",param);
		  	console.log(res.data.code)
		  	if(res.data.code==200){
		  	} else {
		  		this.$message.error(res.data.message)
		  	}
		  },
			  //图片上传
		  async handlePictureCardPreview(file) {
			this.dialogImageUrl = file.url;
			this.dialogVisible = true;
		  },
		  async handleAvatarSuccess(res, file) {
			this.dialogImageUrl = res.data
		  },
		  async handleAvatarSuccess1(res, file) {
		  	this.dialogImageUrls.push(res.data)
		  },
		  async removeImgName(file, dialogImageUrls){
			  if(this.dialogImageUrls.index = file){
				  this.dialogImageUrls.pop(file)
			  }
		  }
	  }
	}
</script>

<style>
	.avatar-uploader .el-upload {
	    border: 1px dashed #d9d9d9;
	    border-radius: 6px;
	    cursor: pointer;
	    position: relative;
	    overflow: hidden;
	  }
	  .avatar-uploader .el-upload:hover {
	    border-color: #409EFF;
	  }
	  .avatar-uploader-icon {
	    font-size: 28px;
	    color: #8c939d;
	    width: 178px;
	    height: 178px;
	    line-height: 178px;
	    text-align: center;
		position: relative;
		top: 75px;
	  }
	  .avatar {
	    width: 178px;
	    height: 178px;
	    display: block;
	  }
</style>
